<template>
    <div class="user-card">
        <!-- 头像 -->
        <RouterElLink :to="userLink">
            <img :src="avatar" class="avatar" alt="用户头像" />
        </RouterElLink>

        <!-- 用户信息 -->
        <div class="user-info">
            <RouterElLink :to="userLink" class="username-link">
                <h3 class="username">{{ username }}</h3>
            </RouterElLink>
            <el-tooltip :content="bio" placement="top" :disabled="bio.length <= 12" effect="light">
                <p class="bio">
                    {{ truncatedBio }}
                </p>
            </el-tooltip>

            <!-- 统计数据 -->
            <div class="stats">
                <div class="stat-item">
                    <span class="stat-number">{{ follows }}</span>
                    <span class="stat-label">关注</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">{{ fans }}</span>
                    <span class="stat-label">粉丝</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">{{ likes }}</span>
                    <span class="stat-label">点赞</span>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button class="follow-btn" :class="{ 'followed': isFollowing }" @click="toggleFollow"
                @mouseover="hovering = true" @mouseleave="hovering = false">
                {{ buttonText }}
            </button>
            <button class="message-btn" @click="sendMessage">私信</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'


const props = defineProps({
    userLink: {
        type: [String, Object],
        default: '/' // 设置默认路由
    },
    avatar: {
        type: String,
        default: 'https://dummyimage.com/80x80'
    },
    username: {
        type: String,
        default: '用户名'
    },
    bio: {
        type: String,
        default: '用户简介用户简介用户简介用户简介用户简介用户简介'
    },
    follows: {
        type: Number,
        default: 10000
    },
    fans: {
        type: Number,
        default: 10000
    },
    likes: {
        type: Number,
        default: 10000
    },
    isFollowing: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['toggle-follow', 'send-message'])

const hovering = ref(false)

const buttonText = computed(() => {
    if (!props.isFollowing) return '关注'
    return hovering.value ? '取消关注' : '已关注'
})

const truncatedBio = computed(() => {
    return props.bio.length > 12 ?
        props.bio.slice(0, 12) + '...' :
        props.bio
})

const toggleFollow = () => {
    emit('toggle-follow', !props.isFollowing)
}

const sendMessage = () => {
    emit('send-message')
}
</script>

<style scoped>
.user-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 400px;
    height: auto;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
}

.user-info {
    flex: 1;
    max-height: 60px;
}

.username {
    margin: 0 0 0px;
    font-size: 18px;
    color: #333;
}

.bio {
    margin: 0 0 0px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-weight: 600;
    color: #333;
}

.stat-label {
    font-size: 12px;
    color: #666;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100px;
}

button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.follow-btn {
    background: #007bff;
    color: white;
}

.follow-btn.followed {
    background: #e9ecef;
    color: #666;
}

.follow-btn.followed:hover {
    background: #dc3545;
    color: white;
}

.message-btn {
    background: #e9ecef;
    color: #333;
}

.message-btn:hover {
    background: #dee2e6;
}
</style>